<header>
    位图画笔 Canvas
</header>
<h2>
    引入
</h2>
<pre>
import canvasRender from './src/tool/canvas/index';
</pre>
<h2>
    使用
</h2>
<p>
    传递一个canvas结点，返回的是一个画笔对象：
</p>
<pre>
var painter = canvasRender(document.getElementsByTagName('canvas')[0], width, height);
</pre>
<p class="warn">
    温馨提示：width和height可选，可以使用默认值。
</p>
<h3>
    配置画笔
</h3>
<pre>
painter.config({
    // 填充色或图案
    "fillStyle": 'black',

    // 轮廓色或图案
    "strokeStyle": 'black',

    // 线的端点类型，（"butt"平直边缘、"round"半圆和"square"矩形）
    "lineCap": "butt",

    // 线的拐角连接方式，（"miter"连接处边缘延长相接、"bevel"对角线斜角和"round"圆）
    "lineJoin": "miter",

    // 线条宽度(单位px，下同)
    "lineWidth": 1,

    // 设置线条虚线，应该是一个数组[number,...]
    "lineDash": [],

    // 文字水平对齐方式（"left"左对齐、"center"居中和"right"右对齐）
    "textAlign": 'left',

    // 文字垂直对齐方式（"middle"垂直居中、"top"上对齐和"bottom"下对齐）
    "textBaseline": 'middle',

    // 阴影的模糊系数，默认0，也就是无阴影
    "shadowBlur": 0,

    // 阴影的颜色
    "shadowColor": "black",

    // 文字大小
    "fontSize": 16,

    // 字体
    "fontFamily": "sans-serif",

    // 字重
    "fontWeight": 400,

    // 字类型
    "fontStyle": "normal",

    // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合）
    "arcStartCap": 'butt',

    // 圆弧结束端闭合方式，和上一个类似
    "arcEndCap": 'butt'
});
</pre>
<h3>
    画笔方法
</h3>
<h4>
    文字
</h4>
<p>
    在点(x, y)处绘制填充的文字text；deg表示文字旋转角度，可选：
</p>
<pre>painter.fillText(text, x, y[, deg]);</pre>
<p class="warn">
    除非特别说明，角度全部采用弧度制。
</p>
<p>
    在点(x, y)处绘制轮廓的文字text；deg表示文字旋转角度，可选：
</p>
<pre>painter.strokeText(text, x, y[, deg]);</pre>
<p>
    在点(x, y)处绘制轮廓并填充的文字text；deg表示文字旋转角度，可选：
</p>
<pre>painter.fullText(text, x, y[, deg]);</pre>
<h4>
    弧
</h4>
<p>
    以(cx, cy)为圆心，内外半径分别是r1和r2，从弧度beginDeg开始，跨越弧度deg，绘制填充圆弧：
</p>
<pre>painter.fillArc(cx, cy, r1, r2, beginDeg, deg);</pre>
<p>
    和fillArc方法类似，只不过绘制的是轮廓圆弧：
</p>
<pre>painter.strokeArc(cx, cy, r1, r2, beginDeg, deg);</pre>
<p>
    和fillArc方法类似，只不过绘制的是轮廓并填充圆弧：
</p>
<pre>painter.fullArc(cx, cy, r1, r2, beginDeg, deg);</pre>
<h4>
    圆形
</h4>
<p>
    以(cx, cy)为圆心，半径r绘制填充圆形：
</p>
<pre>painter.fillCircle(cx, cy, r);</pre>
<p>
    以(cx, cy)为圆心，半径r绘制轮廓圆形：
</p>
<pre>painter.strokeCircle(cx, cy, r);</pre>
<p>
    以(cx, cy)为圆心，半径r绘制轮廓并填充圆形：
</p>
<pre>painter.fullCircle(cx, cy, r);</pre>
<h4>
    矩形
</h4>
<p>
    以(x, y)为左上角，宽width，高height绘制填充矩形：
</p>
<pre>
    painter.fillRect(x, y, width, height);
</pre>
<p>
    以(x, y)为左上角，宽width，高height绘制轮廓矩形：
</p>
<pre>painter.strokeRect(x, y, width, height);</pre>
<p>
    以(x, y)为左上角，宽width，高height绘制轮廓并填充矩形：
</p>
<pre>painter.fullRect(x, y, width, height);</pre>
<h4>
    路径
</h4>
<p>
    基于路径可以绘制几乎大部分图形，非常类似画笔在纸上划动。
</p>
<p>
    开始一段独立的路径：
</p>
<pre>painter.beginPath();</pre>
<p>
    闭合当前路径，也就是路径首尾闭合：
</p>
<pre>painter.closePath();</pre>
<p>
    画笔移动到点(x, y)，此时笔离开了画布：
</p>
<pre>painter.moveTo(x, y);</pre>
<p>
    画笔移动到点(x, y)，此时笔没有离开画布：
</p>
<pre>painter.lineTo(x, y);</pre>
<p>
    以(cx, cy)为圆心，半径r，从弧度beginDeg开始，跨越弧度deg画弧，此时笔没有离开画布：
</p>
<pre>painter.arc(cx, cy, r, beginDeg, deg);</pre>
<p>
    二次贝塞尔曲线到：
</p>
<pre>painter.quadraticCurveTo(cpx, cpy, x, y);</pre>
<p class="warn">
    只有一个控制点p(cpx, cpy),画笔当前的位置和p(x, y)分别是起点和终点。
</p>
<p>
    三次贝塞尔曲线到：
</p>
<pre>painter.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);</pre>
<p class="warn">
    有两个控制点p(cp1x, cp1y)和p(cp2x, cp2y),画笔当前的位置和p(x, y)分别是起点和终点。
</p>
<p>
    把当前路径包裹的区域填充颜色：
</p>
<pre>painter.fill();</pre>
<p>
    把当前路径上色（轮廓线）：
</p>
<pre>painter.stroke();</pre>
<p>
    把当前路径画上轮廓线并填充颜色到当前路径所包裹的区域：
</p>
<pre>painter.full();</pre>
<p>
    暂存当前路径：
</p>
<pre>painter.save();</pre>
<p>
    恢复上次暂存路径：
</p>
<pre>painter.restore();</pre>
<h4>
    擦除画面
</h4>
<pre>painter.clearRect(x, y, w, h);</pre>
<pre>painter.clearCircle(cx, cy, r);</pre>
<h4>
    转Base64
</h4>
<pre>painter.toDataURL();</pre>
<h4>
    获取指定位置颜色
</h4>
<pre>painter.getColor(x, y);</pre>
<h4>
    绘制图片
</h4>
<pre>painter.drawImage(img, sx, sy, sw, sh, x, y, w, h);</pre>
<h3>
    渐变色
</h3>
<p>
    除了使用纯色填充，还可以使用渐变色作为画笔的颜色，你把它看成普通的颜色使用就可以了。
</p>
<h4>
    线性渐变
</h4>
<p>
    首先你需要使用画笔的createLinearGradient创建线性渐变对象，四个参数分别表示渐变的起点P(x1, y1)和终点P(x2, y2)：
</p>
<pre>var linearGradient = painter.createLinearGradient(x1, y1, x2, y2);</pre>
<p class="warn">
    温馨提示：canvas画笔上述参数的单位是px，svg画笔上述参数是%，请一定要注意区分（下同）。
</p>
<h4>
    环形渐变
</h4>
<p>
    同样的，你需要使用画笔的createRadialGradient创建环形渐变对象，三个参数分别表示渐变的圆心P(cx, cy)和半径r：
</p>
<pre>var radialGradient = painter.createRadialGradient(cx, cy, r1, r2);</pre>
<p class="warn">
    温馨提示：渐变的起点是圆心。
</p>
<h4>
    设置与使用
</h4>
<p>
    设置渐变范围以后，你需要在渐变范围中添加渐变色，可以添加任意多个：
</p>
<pre>XXXGradient.addColorStop(deep, color);</pre>
<p>
    上述deep取值为闭区间[0, 1]，color可以是任意合法的颜色值。
</p>
<p>
    渐变如何使用，直接调用渐变的value方法即可：
</p>
<pre>
painter.config({
    "fillStyle": XXXGradient.value()
});
</pre>
<p>
    比如上面，我们给画笔设置填充色就是使用了我们刚刚获取的渐变色。
</p>
<h3>
    区域管理
</h3>
<p>
    有时候，我们可能需要和绘制的图表进行交互，比如点击的时候，需要知道点击的是哪个区域，就可以在引入的时候修改一下：
</p>
<pre>
    import canvasRender from './src/tool/canvas/region';
</pre>
<p>
    如此，使用起来还是和之前一样，只不过多了管理区域的方法。
</p>
<h4>
    设置区域
</h4>
<p>
    每次绘制一个区域前修改一下区域的名称，那么绘制的内容就会被记录起来：
</p>
<pre>
painter.setRegion(regionName);
</pre>
<h4>
    获取区域
</h4>
<pre>
document.getElementsByTagName('canvas')[0].addEventListener("click", function (event) {

    // 打印当前点击在哪个区域
    console.log(painter.getRegion(event));
});
</pre>